import AbstractPlugin from '../abstract-plugin'
import {CN,EN,Web,Icon} from '../../config'
import Utils from '../../utils'
import ProgressBar from '../progress-bar'
const LineStyle = [{
                    title:"实线",
                    icon:Icon.solid,
                    arg:"[]"
                },{
                    title:"点线",
                    icon:Icon.dotted,
                    arg:"[3,3,3]"
                },{
                    title:"缓冲线",
                    icon:Icon.dashed,
                    arg:"[10,7,2,7]"
                }]

const tpl = `
<button 
    class="${CN.iconfont} #{data.cla}" 
    title="#{data.title}"
    data-arg="#{data.arg}"
    data-action="lineStyleChoose">
`
const cssText = `
.#{icn.progress}{
    position:relative;
    width:200px;
    height:30px;
}
`
export default class Confirm extends AbstractPlugin{
	constructor(a,b,pcn){
		super(a,b)
        this.createClassName({
            progress:"progress-wrap"
        })
        this.cn = pcn.assign(this.cn)
        this.__init({
            cssText,
            layer:true,
            layerClass:CN.layer
        })
        this.progress = new ProgressBar(this.$event)
        this.render()
        this.bind()
    }
    render(){
        let cn = this.cn
        
        let html = LineStyle.map(item=>{
            return Utils.parseText(tpl,{
                cla:[cn.btn,CN.abtn,item.icon].join(" "),
                ...item
            })
        }).join("")
        this.progressWrap = document.createDOM("div",{
            class:cn.progress
        })
        this.panel.innerHTML = `<div>${html}</div>`
        this.panel.appendChild(this.progressWrap)
    }
    bind(){
        this.progress.on(EN.onPick,(arg)=>{
            this.emit(EN.action,{
                action:"onLineWidth",
                arg
            })
        })
        this.on()
    }
    onClick(e){
        let target = e.target
        let action = target.dataset.action
        this[action]&&this[action](target,e.epos())
    }
    lineStyleChoose(target){
        this.emit(EN.action,{
            action:"onLineStyle",
            arg:Utils.dataTransform(target.dataset.arg,"array")
        })
    }
    onFocusOut(){
        this.progress.focusOut()
        this.progressWrap.innerHTML=""
        this.$layer.classList.add(CN.hide)
    }
    onFocusIn(pos,state){
        let {left,top} = pos
        this.panel.style.cssText=`left:${left}px;top:${top}px`
        this.progress.focusIn({
            max:6,
            value:state.lineWidth
        },this.progressWrap)
    }
}